<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>前端组件化</title>
		<script type="text/javascript" src="vue.js"></script>
	</head>

	<body>
		<!-- 要合理的组件化 
就是把一个完整页面功能分割成一个个小的部分，便于维护

v-on:click===@click
v-bind:xxx===:xxx
    -->
		<div id="app">
			<input type="text" name="inp" v-model="inputValue">
			<button @click="handleBtnClick" type="button">提交</button>
			<ul>
				<todopub :xxx="item" :yyy="index" @delete="pubdelete" v-for="(item,index) in list" :key="index"></todopub>
			</ul>
		</div>
		<script type="text/javascript">
			// 全局组件，不用注册
			// Vue.component("todopub", {
			//     props:['xxx'],
			//     template: "<li>{{xxx}}</li>"
			// });
			// 局部组件
			var todopub = {
				props: ['xxx', "yyy"],
				template: "<li @click='pubclick'>{{xxx}}</li>",
				data:function(){
					return {
						arg:[this.xxx,this.yyy]
					}
				},
				methods: {
					pubclick: function() {
						//子组件对象，当不清楚是直接输出组件对象即可，这中的this
						console.log(this);
						//注意emit发射发出    props支撑依赖
						//例子：$emit('increment1',[12,'kkk'])就是触发自定义事件increment1(或者函数名吧)，[]为传递的参数，也可为对象
						this.$emit("delete", this.arg)
					}
				}
			};
			var app = new Vue({
				el: "#app",
				components: {
					todopub: todopub
				},
				data: {
					list: [],
					inputValue: ""
				},
				methods: {
					handleBtnClick: function(e) {
						this.list.push(this.inputValue);
						this.inputValue = "";
					},
					pubdelete: function(e) {
						console.log(e)
						this.list.splice(e[1], 1)
					}
				}
			});
		</script>
	</body>

</html>